<template>

  <bm-overlay
    v-show="show"
    ref="customOverlay"
    :class="{sample: true, active}"
    pane="labelPane"
    @draw="draw">
    <div  @click="handleClick" >
       <div class="sample-item-title">属性信息  <div class="close-icon" @click="close(false)"></div></div>
        <div class="sample-item-box"><div class="s-title">企业名称:</div> <div class="s-subTile">{{text}}</div></div>

    </div>
  </bm-overlay>
</template>

<script>
export default {
  props: ['text', 'position', 'active','show','id'],
  watch: {
    position: {
      handler () {
        // this.$refs.customOverlay.reload()
      },
      deep: true
    }
  },
  methods: {
    handleClick () {

    },
    close(status){
      console.log(  )
      this.$emit('childFn',this.id);

    },
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x + 60 + 'px'
      el.style.top = pixel.y -200 + 'px'
    }
  }
}
</script>
<style>
.sample {
  /*width: 120px;*/
  /*height:120px;*/
  /*line-height: 40px;*/


  background: rgba(15,46,75,0.50);
  color: red;
  text-align: center;
  padding: 10px;
  position: absolute;

}
.sample-item-box{
  width: 240px;
  padding: 10px 0;
  /*min-height: 40px;*/
  /*text-align: center;*/
  margin: 0 auto;
  background: rgba(41,113,183,.83);
  margin-top: 11px;
  display: flex;
  align-items: center;

}
.s-title{
    width: 40%;
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
}
.s-subTile{
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left !important;
  color: #00f0ff;
  font-weight: bold;
  text-align: left;
}
.sample-item-title{


  opacity: 1;
  background: linear-gradient(0deg,#92cbff 0%, #fafafb 100%);
  font-weight: bold;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  -moz-box-decoration-break: clone;
  color: transparent;
    text-align:left;

  letter-spacing: 1px;

  height: 49px;
  line-height: 49px;
  width: 240px;
  margin: 0 auto;
  border-bottom: 1px solid #00f0ff;
}
.close-icon{
  position: absolute;
  top: 20px;
  right: 13px;
  width: 23px;
  height: 23px;
  background: url("~@/assets/images/close.png") no-repeat;
  background-size: 100% 100%;
}
.sample.active {

  color: red;
}
</style>
